<template>
	<view class="setup">
		<view class="edgeInsetTop"></view>
		<form @submit="formSubmit">
			<view class="setup_form">
				<view class="cu-list menu solid-bottom">
					<view class="cu-item arrow" style="min-height:150rpx;" @tap="Avatar">
						<view class="content">
							<text>头像</text>
						</view>
						<view class="action">
							<view class="cu-avatar round lg"
								:style="{backgroundImage: 'url('+ $wanlshop.oss(user.avatar, 40, 40, 2, 'avatar') +')'}">
							</view>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">昵称</view>
					<input placeholder="请输入昵称" name="nickname" :value="user.nickname"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">用户名</view>
					<input placeholder="请输入用户名" name="username" :value="user.username"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">个性签名</view>
					<input placeholder="请输入个性签名" name="bio" :value="user.bio"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">性别</view>
					<view style="display: none;">
						<input name="gender" :value="genderdata" disabled></input>
					</view>
					<switch class='switch-sex' @change="Gender" :class="gender?'checked':''"
						:checked="gender?true:false">
					</switch>
				</view>
				<view class="cu-form-group" @click="showModal('date')">
					<view class="title">出生日期</view>
					{{user.birthday || '请选择'}}
					<!-- <picker mode="date" :value="user.birthday || '1992-08-23'" @change="DateChange">
						<view style="display: none;">
							<input name="birthday" :value="user.birthday" disabled></input>
						</view>
						<view class="picker">
							{{user.birthday || '1992-08-23'}}
						</view>
					</picker> -->
				</view>
			</view>

			<view class="flex flex-direction btn_group">
				<button style="background-color: #fd8c00; color: white;border-radius: 50vw; " form-type="submit"
					class="cu-btn  margin-tb lg">保存</button>
				<button style="border-radius: 50vw;" class="cu-btn lg logout" @tap="logout()">退出登录</button>
			</view>
		</form>



		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 优惠券 -->
			<view class="cu-modal bottom-modal couponModal" :class="modalName == 'date' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog bg-bgcolor" @tap.stop="">
					<view class="wanl-modal">
						<!-- <view class="head padding-bj">
							<view class="content">
								<view class="text-lg">出生日期</view>
							</view>
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view> -->

						<picker-view :indicator-style="indicatorStyle" :value="birthday" @change="DateChange"
							class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>

						<view class="foot padding-lr-bj">
							<button class="cu-btn round complete" @tap="hideModal"
								style="background-color: #fd8c00; color: #ffffff; font-size: 26rpx;">完成</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	import {
		mapState
	} from 'vuex';

	const minYear = 1900; // 最小可选年份

	const date = new Date()
	const years = []
	const year = date.getFullYear()
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const day = date.getDate()
	for (let i = minYear; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		if (i < 10) i = `0${i}`
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		if (i < 10) i = `0${i}`
		days.push(i)
	}
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				modalName: '',
				gender: true,
				genderdata: 0,
				years,
				year,
				months,
				month,
				days,
				day,
				indicatorStyle: `height: 50px;`,
				birthday: [],
			}
		},
		onLoad() {
			//中央总线重新赋值Data
			this.gender = this.$store.state.user.gender == 0 ? true : false;
			this.genderdata = this.$store.state.user.gender;
		},
		watch: {
			'user.birthday': {
				handler(n, o) {
					console.log('new', n)
					if (n) {
						let bir = n.split('-');
						bir = [bir[0] - minYear, bir[1] - 1, bir[2] - 1];
						// console.log('bir', bir)
						this.birthday = bir;
					} else {
						this.birthday = [2000 - minYear, 0, 0]; //设置选择器默认日期为2000-1-1
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 弹出层，暂时不需要但后续版本可能需要
			showModal(name) {
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal() {
				this.modalName = null;
			},
			//禁止父元素滑动
			moveHandle() {},
			logout() {
				this.$api.get({
					url: '/wanlshop/user/logout',
					data: {
						client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
							"wanlshop:chat_client_id") : ''
					},
					success: res => {
						this.$store.dispatch('user/logout');
						this.$wanlshop.msg('退出成功');
						this.$wanlshop.back(1);
					}
				});
			},
			DateChange(e) {
				// this.$store.state.user.birthday = e.detail.value
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.$store.state.user.birthday = [this.year, this.month, this.day].join('-');
				console.log('year', [this.year, this.month, this.day].join('-'))
			},
			Gender(e) {
				if (e.detail.value == true) {
					this.gender = true;
					this.genderdata = 0;
				} else {
					this.gender = false;
					this.genderdata = 1;
				}
			},
			Avatar() {
				this.$wanlshop.to('/pages/user/portrait/portrait');
			},
			formSubmit: function(e) {
				//定义表单规则

				let rule = [{
						name: 'username',
						checkType: 'string',
						checkRule: '3,32',
						errorMsg: '用户名，至少3-32字符'
					},
					{
						name: 'nickname',
						checkType: 'string',
						checkRule: '3,32',
						errorMsg: '昵称，至少3-32字符'
					}
				];
				//进行表单检查
				let formData = {...e.detail.value, birthday: this.$store.state.user.birthday};
				console.log('formData', formData)
				let checkRes = graceChecker.check(formData, rule);
				// ..检查是否注册-没注册跳转注册
				if (checkRes) {
					this.$api.post({
						url: '/wanlshop/user/profile',
						data: formData,
						success: res => {
							// 保存用户信息
							this.$store.commit('user/setUserInfo', formData);
							// 提示
							this.$wanlshop.msg('保存成功');
						}
					});
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	.setup {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.setup_form {
		border-radius: 20rpx;
		overflow: hidden;

		.action {
			.cu-avatar {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.btn_group {
		position: fixed;
		bottom: 50px;
		left: 0;
		width: 100%;
		padding: 0 20rpx;

		.cu-btn {
			font-size: 28rpx;
		}

		.logout {
			border: 1px solid $theme;
			color: $theme;
			background-color: transparent;
		}
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>